//@ts-nocheck
import React, { useEffect, useImperativeHandle } from 'react'
import * as echarts from 'echarts/lib/echarts'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/grid'
import 'echarts/lib/chart/line'
import { ChartsInstance } from '../../Charts/Bar/interface'
import { ColorGamut } from '../colorConfig'
import './index.less'

let echartsInstance: any

interface IProps {
  chartId?: string
  data: Array<any>
  xData: Array<any>
  chartRef?: React.MutableRefObject<ChartsInstance>
}

const BrokeLineChart: React.FC<IProps> = ({ chartId, chartRef, data, xData }) => {
  useEffect(() => {
    echartsInstance = echarts.init(document.getElementById(chartId || 'broke-line-chart'))
  }, [])

  useEffect(() => {
    if (echartsInstance && data.length > 0) setOptions()
  }, [data])

  useImperativeHandle(chartRef, () => ({
    getInstance: () => {
      return echartsInstance
    }
  }))

  const setOptions = () => {
    echartsInstance.setOption({
      tooltip: {
        trigger: 'axis'
      },
      color: ColorGamut,
      legend: {
        data: data.map((val) => val.name),
        x: 'center',
        bottom: 0,
        itemGap: 24,
        itemHeight: 10,
        itemWidth: 8,
        borderRadius: 5,
        textStyle: {
          color: '#617185'
        },
        itemStyle: {
          borderWidth: 10,
          borderRadius: 5
        }
      },
      grid: {
        right: '0%',
        height: '86%',
        left: '0%',
        with: '95%',
        top: '4%',
        bottom: '9%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: xData,
        axisTick: { show: false },
        axisLine: {
          lineStyle: {
            color: '#DCE0E6'
          }
        },
        axisLabel: {
          margin: 8,
          color: '#8B98A9',
          formatter: function (params) {
            let newParamsName = '' // 最终拼接成的字符串
            let paramsNameNumber = params.length // 实际标签的个数
            let provideNumber = 4 // 每行能显示的字的个数
            let rowNumber = Math.ceil(paramsNameNumber / provideNumber) // 计算行数，向上取整
            // 判断是否需要换行
            if (paramsNameNumber > provideNumber) {
              // 循环得到每行的显示内容，p代表行
              for (let p = 0; p < 2; p++) {
                let tempStr = '' // 表示每一次截取的字符串
                let start = p * provideNumber // 开始截取的位置
                let end = start + provideNumber // 结束截取的位置
                if (p === rowNumber - 1) {
                  // 最后一次不换行
                  tempStr = params.substring(start, paramsNameNumber)
                } else {
                  // 每一次拼接字符串并换行
                  tempStr = params.substring(start, end) + '\n'
                }
                newParamsName += tempStr // 最终拼成的字符串
              }
              if (paramsNameNumber > 8) {
                newParamsName = newParamsName.substring(0, newParamsName.length - 2) + '...'
              }
            } else {
              // 将旧标签的值赋给新标签
              newParamsName = params
            }

            return newParamsName
          },
          interval: 0
        }
      },
      yAxis: {
        type: 'value',
        axisTick: { show: false },
        axisLabel: {
          margin: 36,
          align: 'right',
          color: '#8B98A9'
        },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: '#ECEEF1'
          }
        }
      },
      series: data?.map((val) => {
        return { ...val, type: 'line', symbol: 'circle', symbolSize: 6,  }
      })
    })
  }

  return <div className="broke-line-chart" id={chartId || 'broke-line-chart'} />
}
export default (BrokeLineChart)
